import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Card, Button, Descriptions } from 'antd'
import { reqGetHospitalDetail } from '@api/hospital/hospitalList'
import { IhospitalDetail } from '@api/hospital/hospitalList/model/hospitalListTypes'
export default function HospitalListDetail() {
  const { id } = useParams()
  const [hosDetail, setHosDetail] = useState<IhospitalDetail>({})
  useEffect(() => {
    async function fetch() {
      const result = await reqGetHospitalDetail(id as string)
      setHosDetail(result)
    }
    fetch()
  }, [])
  return (
    <Card>
      {/* title 是当前描述列表的标题  bordered 添加边框  column 控制一行有几个Item,默认值是3. */}
      <Descriptions title="基本信息" bordered column={2}>
        {/* label就是每一个描述列表项的小标题 */}
        <Descriptions.Item label="医院名称">
          {hosDetail.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {/* 这个字节点的位置,写什么,则描述列表项的内容部分就渲染什么 */}
          <img
            src={'data:image/png;base64,' + hosDetail.hospital?.logoData}
            alt=""
            width="80"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">YES</Descriptions.Item>
        <Descriptions.Item label="医院地址">
          2018-04-24 18:00:00
        </Descriptions.Item>
        {/* span={2} 表示当前Item在描述列表的一行中占2个位置 */}
        <Descriptions.Item label="坐车路线" span={2}>
          2019-04-24 18:00:00
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          123
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title="预约规则"
        bordered
        column={2}
        style={{ marginTop: 20 }}
      >
        {/* label就是每一个描述列表项的小标题 */}
        <Descriptions.Item label="预约周期">Cloud Database</Descriptions.Item>
        <Descriptions.Item label="放号时间">Prepaid</Descriptions.Item>
        <Descriptions.Item label="停挂时间">YES</Descriptions.Item>
        <Descriptions.Item label="退号时间">
          2018-04-24 18:00:00
        </Descriptions.Item>
        {/* span={2} 表示当前Item在描述列表的一行中占2个位置 */}
        <Descriptions.Item label="预约规则" span={2}>
          2019-04-24 18:00:00
        </Descriptions.Item>
      </Descriptions>
      <Button style={{ marginTop: 20 }}>返回</Button>
    </Card>
  )
}
